<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for--- 二级联动</title>


    <script src="../lib/vue.global.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.12/index.full.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.12/index.css" rel="stylesheet">

</head>
<body>

<div id="app">


    <el-button type="success">dd</el-button>
    城市: <select  @change="selectedChange" v-model="selected">
    <option v-for="city in cities" :value="city.id">{{city.name}}</option>
        </select>
    学校： <select >
       <option v-for="school in schools" :value="school.id">{{school.name}}</option>
</select>


</div>

</body>
<script src="../mock/cities.js"></script>

<script>
    Vue.createApp({

        data: function () {
            return {
                cities: cities,
                schools:[],
                selected:1
            }
        },methods:{
              selectedChange:function (){

                   var callback = function (item){
                       return item.id==this.selected;
                   };

                   this.schools=  this.cities.find(callback).schools;

                 //  this.schools =this.cities.find(item=>item.id==this.selected).schools;


              }
        }

    }).use(ElementPlus)
        .mount('#app')

</script>


</html>